<template>
  <div>
    <nav :class="navClass">
      <div class="nav-inner">
        <h1 class="logo">
          <a href="/">DxCorp</a>
        </h1>
        <div class="action-box">
          <ul class="menu" @mouseenter="expandMenu" @mouseleave="shrinkMenu">
            <li
              class="menu-item"
              @mouseenter="expandSubMenu(0)"
              @mouseleave="shrinkSubMenu(0)"
            >
              <a href="#">关于我们</a>
              <transition @enter="subMenuShowAnime" @leave="subMenuHideAnime">
                <ul v-show="currentMenuIndex == 0" class="sub-menu">
                  <li class="sub-menu-item">
                    <a href="./aboutus">公司简介</a>
                  </li>
                  <!-- <li class="sub-menu-item">
                    <a href="http://www.hsingdu.com:81">dxcorpV3</a>
                  </li> -->
                </ul>
              </transition>
              <div v-show="expand" class="menu-item-trigger"></div>
            </li>
            <li
              class="menu-item"
              @mouseenter="expandSubMenu(1)"
              @mouseleave="shrinkSubMenu(1)"
            >
              <a href="#">业务</a>
              <transition @enter="subMenuShowAnime" @leave="subMenuHideAnime">
                <ul v-show="currentMenuIndex == 1" class="sub-menu">
                  <li class="sub-menu-item">
                    <a href="http://www.hsingdu.com:82">数据大屏</a>
                  </li>
                </ul>
              </transition>
              <div v-show="expand" class="menu-item-trigger"></div>
            </li>
            <li
              class="menu-item"
              @mouseenter="expandSubMenu(2)"
              @mouseleave="shrinkSubMenu(2)"
            >
              <a href="#">数据驱动</a>
              <transition @enter="subMenuShowAnime" @leave="subMenuHideAnime">
                <ul v-show="currentMenuIndex == 2" class="sub-menu">
                  <li class="sub-menu-item">
                    <a href="http://www.hsingdu.com:9000">数据看板</a>
                  </li>
                </ul>
              </transition>
              <div v-show="expand" class="menu-item-trigger"></div>
            </li>
          </ul>
          <div class="lang-box">
            <a style="margin-right: 20px" href="http://www.hsingdu.com:9000"
              >登录</a
            >
            <i>|</i>
            <a style="margin-right: 80px" href="#">注册</a>
            <i>|</i>
            <a class="current" href="#">简</a>
            <i>/</i>
            <a href="#">繁</a>
            <i>/</i>
            <a href="#">EN</a>
          </div>
        </div>
      </div>
      <transition @enter="maskShowAnime" @leave="maskHideAnime">
        <div v-show="expand" class="menu-expand-mask"></div>
      </transition>
      <div class="menu-open-icon" @click="openMenuPanel"></div>
      <div
        v-show="menuPanelShow"
        class="menu-panel-mask"
        @click="closeMenuPanel"
      ></div>
      <transition @enter="menuPanelShowAnime" @leave="menuPanelHideAnime">
        <div v-show="menuPanelShow" class="menu-panel">
          <div class="menu-close-icon" @click="closeMenuPanel"></div>
          <ul class="panel-menu">
            <li>
              <a href="./aboutus">关于我们</a>
            </li>
            <li>
              <a href="http://www.hsingdu.com:82">数据大屏</a>
            </li>
            <li>
              <a href="http://www.hsingdu.com:9000">数据看板</a>
            </li>
          </ul>
          <div class="panel-lang-box">
            <a href="http://www.hsingdu.com:9000">登录</a>
            <i>|</i>
            <a href="#">注册</a>
            <i>|</i>
            <a href="#">简体</a>
            <i>|</i>
            <a href="#">繁体</a>
            <i>|</i>
            <a href="#">English</a>
          </div>
        </div>
      </transition>
    </nav>
  </div>
</template>
 
<script>
import util from "@/lib/util";
export default {
  name: "",
  props: {},
  data() {
    return {
      expand: false,
      currentMenuIndex: -1,
      scrollDirection: "down",
      pageScroll: 0,
      menuPanelShow: false,
    };
  },
  computed: {
    navClass() {
      if (this.pageScroll < 30) {
        if (this.expand) {
          return "white-nav white-nav-expand";
        } else {
          return "white-nav";
          //  return "black-nav";
        }
      } else if (this.pageScroll >= 30 && this.pageScroll < 50) {
        return "white-nav";
      } else {
        if (this.scrollDirection == "down") {
          return "white-nav hide-nav";
        } else {
          return "white-nav";
        }
      }
    },
  },
  created() {
    this.handleScroll();
  },
  methods: {
    openMenuPanel() {
      this.menuPanelShow = true;
    },
    closeMenuPanel() {
      this.menuPanelShow = false;
    },
    handleScroll() {
      window.addEventListener("scroll", (event) => {
        let scrollTop = util.getPageScrollY();
        if (scrollTop > this.pageScroll) {
          this.scrollDirection = "down";
        } else {
          this.scrollDirection = "up";
        }

        this.pageScroll = scrollTop;
      });
    },
    expandMenu() {
      this.expand = true;
    },
    shrinkMenu() {
      this.expand = false;
    },
    expandSubMenu(index) {
      this.currentMenuIndex = index;
    },
    shrinkSubMenu(index) {
      this.currentMenuIndex = -1;
    },
    maskShowAnime(el, done) {
      this.anime({
        targets: el,
        scaleY: [0, 1],
        opacity: [0, 1],
        easing: "linear",
        duration: 150,
        complete() {
          done();
        },
      });
    },
    maskHideAnime(el, done) {
      this.anime({
        targets: el,
        scaleY: [1, 0],
        opacity: [1, 0],
        easing: "linear",
        duration: 150,
        complete() {
          done();
        },
      });
    },
    subMenuShowAnime(el, done) {
      this.anime({
        targets: el,
        translateY: [-30, 0],
        opacity: [0, 1],
        easing: "linear",
        duration: 150,
        complete() {
          done();
        },
      });
    },
    subMenuHideAnime(el, done) {
      this.anime({
        targets: el,
        translateY: [0, -30],
        opacity: [1, 0],
        easing: "linear",
        duration: 150,
        complete() {
          done();
        },
      });
    },
    menuPanelShowAnime(el, done) {
      this.anime({
        targets: el,
        translateX: [-260, 0],
        easing: "linear",
        duration: 250,
        complete() {
          done();
        },
      });
    },
    menuPanelHideAnime(el, done) {
      this.anime({
        targets: el,
        translateX: [0, -260],
        easing: "linear",
        duration: 250,
        complete() {
          done();
        },
      });
    },
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
nav {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 2;
  height: 80px;
  transition: all 0.3s;
  // background: #000;
}
.nav-inner {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.logo {
  width: 168px;
  height: 22px;
  a {
    display: block;
    // width: 100%;
    // height: 100%;
    // font-size: 16px;
    // background-size: 100% 100%;
    text-align: center;
  }
}
.action-box {
  width: 850px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  @media screen and (max-width: 992px) {
    display: none;
  }
}
.menu {
  height: 100%;
  display: flex;
}
.menu-item {
  height: 100%;
  padding: 0px 36px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;

  & > a {
    // font-weight: bold;
    font-weight: 600;
    // opacity: 0.9;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 100%;
      height: 4px;
      position: absolute;
      bottom: -8px;
      left: 0px;
      background-color: #194ac3;
      opacity: 0;
      transform-origin: 50% 0%;
      transform: scaleX(0);
      transition: all 0.2s;
    }
  }
}
.menu-item:hover > a::after {
  opacity: 1;
  transform: scaleX(1);
}
.menu-item-trigger {
  width: 100%;
  height: 348px;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 1;
}
.sub-menu {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 2;
}
.sub-menu-item {
  width: 100%;
  padding: 14px 0px;
  text-align: center;
  cursor: pointer;

  & > a {
    color: #2b2e2e;
    opacity: 0.7;
  }
}
.sub-menu-item > a:hover {
  opacity: 1;
}
.menu-expand-mask {
  width: 100%;
  height: 420px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: white;
  transform-origin: 50% 0%;
}

.lang-box {
  a {
    opacity: 0.7;
  }

  i {
    font-size: 12px;
    opacity: 0.7;
    margin: 0px 3px;
  }

  .current {
    opacity: 1;
  }
}

.white-nav {
  background-color: white;
  font-size: 18px;

  .logo {
    a {
      // background-image: url("https://www.tencent.com/img/index/menu_logo_hover.png");
      // background: azure;
      color: #000;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .menu-item > a {
    color: #2b2e2e;
  }

  .lang-box {
    color: #2b2e2e;
  }

  .menu-open-icon {
    width: 20px;
    height: 20px;
    top: 18px;
    left: 18px;
    background-image: url("https://www.tencent.com/img/mobile/icon_menu_hover.png");
  }
}

.black-nav {
  background-color: black;

  .logo {
    a {
      // background-image: url("https://www.tencent.com/img/index/menu_logo_hover.png");
      // background: coral;
      color: #fff;
    }
  }

  .menu-item > a {
    // color: #2b2e2e;
    color: #fff;
  }

  .lang-box {
    color: #2b2e2e;
  }

  .menu-open-icon {
    width: 20px;
    height: 20px;
    top: 18px;
    left: 18px;
    background-image: url("https://www.tencent.com/img/mobile/icon_menu_hover.png");
  }
}

.white-nav-expand {
  background-color: transparent;
}
.transparent-nav {
  background-color: transparent;

  .logo {
    a {
      background-image: url("https://www.tencent.com/img/index/menu_logo.png");
    }
  }

  .menu-item > a {
    color: rgb(248, 239, 239);
  }

  .lang-box {
    color: white;
  }

  .menu-open-icon {
    background-image: url("https://www.tencent.com/img/mobile/icon_menu.png");
  }
}
.hide-nav {
  top: -80px;
}

.menu-open-icon {
  display: none;
  width: 14px;
  height: 14px;
  position: absolute;
  top: 22px;
  left: 22px;
  background-size: 100% 100%;
  z-index: 2;

  @media screen and (max-width: 992px) {
    display: block;
  }
}

.menu-close-icon {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 22px;
  left: 22px;
  background-image: url("https://www.tencent.com/img/mobile/icon_menu_close.png");
  background-size: 100% 100%;
}

.menu-panel-mask {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.2);
}

.menu-panel {
  width: 260px;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: white;
  z-index: 2;
}

.panel-menu {
  width: 100%;
  margin-top: 90px;

  li {
    width: 100%;
    height: 64px;
    padding-left: 56px;
  }

  a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #2a2e2e;
    opacity: 0.95;
  }
}

.panel-lang-box {
  height: 64px;
  padding-left: 56px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  color: #2a2e2e;
  opacity: 0.95;

  i {
    color: #878a8a;
    margin: 0px 8px;
  }
}
</style>

